<template>
  <div class="list-detail">
    <div class="header">
      <h3 class="line">在途货物</h3>
    </div>
    <el-card style="margin-top: 10px">
      <div class="list-header">
        <el-button type="text" @click="handleReturn" style="padding-top:0 !important"><span
            class="el-icon-arrow-left"></span><span>订单详情</span></el-button>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="24">
            <h4>订单信息<span style="margin-left:5px;">(DD00000000095)</span></h4>
          </el-col>
        </el-row>
        <el-row style="margin-bottom:10px">
          <el-col :span="6">
            <span class="label">供应商名称:</span>
            <span class="value">北京远大创新科技有限公司</span>
          </el-col>
          <el-col :span="6">
            <span class="label" style="text-align:center">公司名称:</span>
            <span class="value">北京天气真好科技集团有限公司</span>
          </el-col>
          <el-col :span="6" style="text-align:center">
            <span class="label">采购员:</span>
            <span class="value">某某某</span>
          </el-col>
          <el-col :span="6" style="text-align:center">
            <span class="label">交货地:</span>
            <span class="value">国内</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span class="label" style="margin-left:12px;">付款类型:</span>
            <span class="value">先款后货</span>
          </el-col>
          <el-col :span="6">
            <span class="label">发货方式:</span>
            <span class="value">自提</span>
          </el-col>
          <el-col :span="6" style="text-align:center">
            <span class="label">付款状态:</span>
            <span class="value">部分付款</span>
          </el-col>
          <el-col :span="6" style="text-align:center">
            <span class="label"  style="margin-left:49px">发票类型:</span>
            <span class="value">增值税专用发票</span>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div v-if="state == '待发货'">
      <toBeShipped />
    </div>
    <div v-else-if="state == '部分发货'">
      <partShipped />
    </div>
    <div v-else-if="state == '全部发货'">
      <allShipped />
    </div>
  </div>
</template>

<script>
import toBeShipped from "./components/toBeShipped.vue";
import partShipped from "./components/partShipped.vue";
import allShipped from "./components/allShipped.vue";
export default {
  name: "transiListDetail",
  data() {
    return {
      state: '',
      gutter: 5,
      span: 12,
    };
  },
  components: {
    toBeShipped,
    partShipped,
    allShipped
  },
  mounted() {
    this.handleStatus()
  },
  methods: {
    handleStatus() {
      this.state = window.sessionStorage.state
    },
    handleReturn() {
      this.$router.push('./transitGoods')
    }
  }
};
</script>

<style scoped lang="scss">
.list-detail {
  font-size: 16px;

  .header {
    h3 {
      font-weight: bold;
    }
  }

  .line::before {
    content: " ";
    width: 8px;
    height: 20px;
    background: #0782eb;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0px 5px;
  }

  .list-header {
    border-bottom: 1px solid #eee;

    span {
      color: #333;
      font-weight: 700;
      font-size: 16px;
    }
  }
  .item {
    h4 {
      font-size: 12px;
      color: #333;
      font-weight: 700;
      margin: 9px 0 5px 0;
    }

    .label {
      font-size: 12px;
      color: #999;
      margin-right: 5px;
    }

    .value {
      font-size: 12px;
      color: #333;
    }
  }
}
</style>